<template>
    <div>
        <h1>
            {{ list.name }}
            <router-link :to="'/list/'+list.kindId">进入场景</router-link>
        </h1>
        <!-- 第一次渲染用外部数据 -->
        <ul>
            <li
                :style="{ width: w() + 'rem' }"
                v-for="item in myList"
                :key="item.designTemplateId"
            >
                <router-link :to="'/detail/'+item.designTemplateId">
                    <img
                        :style="{
                            height:
                                (parseInt(item.height) / parseInt(item.width)) *
                                    w() +
                                'rem',
                        }"
                        v-lazy="
                            'http:' +
                            item.designTemplateImageUrl +
                            '?x-oss-process=image/resize,w_300/format,jpg'
                        "
                        alt=""
                    />
                </router-link>
            </li>
        </ul>
        <div class="more">
            <router-link to="/cc">更多</router-link>
            <button @click="tip">换一批</button>
        </div>
        <!-- 长按放大 -->
    </div>
</template>
<script>
import fet from "../api.js";
export default {
    props: ["list"],
    data() {
        return {
            myList: [],
            page: 1,
        };
    },
    created() {
        this.myList = this.list.templates;
    },
    methods: {
        tip() {
            // alert(this.list.kindId);
            this.page++;
            this.getSceneList();
        },
        async getSceneList() {
            let res = await fet(
                `/api/designtemplate/getWxAppTemplateByKindId.do?_dataType=json&_dataClientType=3&client_type=40&fid=0&sid=${this.list.kindId}&page_size=6&page_no=${this.page}`
            );
            // console.log(res);
            let url = res.body.cacheUrl;
            let res2 = await fetch(
                `https:${url}&_dataClientType=3&client_type=40`
            ).then((r) => r.json());
            // console.log(res2);
            this.myList = res2.body.templates;
            // console.log(this.myList);
        },
        w() {
            return this.list.kindId == 20 || this.list.kindId == 12 ? 3.5 : 2.2;
        },
    },
};
</script>
<style lang="scss" scoped>
div {
    h1 {
        padding: 0.3rem 0.2rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
            font-size: 0.28rem;
            color: #666;
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li {
            width: 2.2rem;
            margin-bottom: 0.2rem;
            img {
                display: block;
                width: 100%;
                box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.8);
            }
        }
    }
    .more {
        display: flex;
        justify-content: space-around;
        a {
            display: block;
            width: 3rem;
            line-height: 0.6rem;
            padding: 0.1rem;
            text-align: center;
            background-color: #f3f4f9;
            border-radius: 0.5rem;
            font-size: 0.3rem;
            cursor: pointer;
        }
        button {
            width: 3rem;
            border-radius: 0.5rem;
            background-color: #f3f4f9;
            border: none;
            outline: 0;
            font-size: 0.3rem;
            cursor: pointer;
        }
    }
}
</style>
